<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <!-- fav icon -->
        <link rel="icon" href="../assets/images/fav-icon/fav-icon.png">
        
        <!-- bootstarp -->
        <link rel="stylesheet" href="../css/vendors/bootstrap.min.css">
        
        <!-- animate.css file -->
        <link rel="stylesheet" href="../css/vendors/animate.css">
        
        <!-- Fancybox -->
        <link rel="stylesheet" href="../css/vendors/jquery.fancybox.min.css">
        
        <!-- Splitting -->
        <link rel="stylesheet" href="../css/vendors/splitting.css">
        
        <!-- fontAwesome -->
        <link rel="stylesheet" href="../css/vendors/all.min.css">
        
        <!-- Font Family -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&amp;family=Nunito:wght@400;500;600;700;800;900&amp;display=swap">
        
        <!-- main-LTR-1 -->
        <link rel="stylesheet" href="../css/main-LTR-1.css">
    <title> Portfolio  single</title>
  </head>
  <body class=" dark-theme   overlay-is-linear-gradient rounded-btns"> 
    <!--Start Page Header-->
    <header class="page-header menu-on-end" id="page-header">
      <!--start navbar-->
      <div class="container-fluid">
        <nav class="main-navbar " id="main-nav"><a class="navbar-brand " href="#"><img class="brand-logo light-logo img-fluid " src="../assets/images/logo/logo-light-wide.png" alt=""/><img class="brand-logo dark-logo img-fluid " src="../assets/images/logo/logo-dark-wide.png" alt=""/></a>
          <div class="menu-toggler-btn"><span></span><span></span><span></span></div>
          <div class=" navbar-menu-wraper  " id="navbar-menu-wraper">
            <ul class="navbar-nav  mobile-menu ">
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-home icon"></i>home<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1_dark.html"><i class="fas fa-home icon"></i>home-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2_dark.html"><i class="fas fa-home icon"></i>home-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-3_dark.html"><i class="fas fa-home icon"></i>home-3</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-4_dark.html"><i class="fas fa-home icon"></i>home-4</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-5_dark.html"><i class="fas fa-home icon"></i>home-5</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-6_dark.html"><i class="fas fa-home icon"></i>home-6</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-7_dark.html"><i class="fas fa-home icon"></i>home-7</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-8_dark.html"><i class="fas fa-home icon"></i>home-8</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-9_dark.html"><i class="fas fa-home icon"></i>home-9</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-10_dark.html"><i class="fas fa-home icon"></i>home-10</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-11_dark.html"><i class="fas fa-home icon"></i>home-11</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-12_dark.html"><i class="fas fa-home icon"></i>home-12</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1-rtl_dark.html"><i class="fas fa-home icon"></i>home-1 RTL</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2-rtl_dark.html"><i class="fas fa-home icon"></i>home-2 RTL</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="features_dark.html"><i class="fas fa-boxes icon"></i>services</a></li>
              <li class="nav-item"><a class="nav-link  " href="about-us_dark.html"><i class="fas fa-address-card icon"></i>about us</a></li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-cogs icon"></i>portfolio<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-rounded-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio rounded </a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-no-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-slider_dark.html"><i class="fas fa-cog icon"></i>portfolio slider</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-single_dark.html"><i class="fas fa-list icon"></i>portfolio single</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-edit icon"></i>blog<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>blog home<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-1-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-2-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 2  </a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-3-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 3  </a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>single post<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-image_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-slider_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-video_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 3</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-money-check icon"></i>pricing<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-1_dark.html"><i class="fas fa-money-check icon"></i>pricing page 1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-2_dark.html"><i class="fas fa-money-check icon"></i>pricing page 2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-3_dark.html"><i class="fas fa-money-check icon"></i>pricing page 3</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-file-code icon"></i>pages<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="testimonials_dark.html"><i class="fas fa-comments icon"></i>testimonials</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="clients_dark.html"><i class="fas fa-users icon"></i>our clients</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="faq_dark.html"><i class="fas fa-question icon"></i>FAQ</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-times icon"></i>404 pages<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-1_dark.html"><i class="fas fa-times icon"></i>404-1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-2_dark.html"><i class="fas fa-times icon"></i>404-2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-3_dark.html"><i class="fas fa-times icon"></i>404-3</a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-in_dark.html"><i class="fas fa-sign-in-alt icon"></i>sign in</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-up_dark.html"><i class="fas fa-user-plus icon"></i>sign up</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
            </ul>
          </div><a class="header-cta  ma-btn-primary " href="#0">Subscribe</a>
        </nav>
      </div>
      <!--End navbar-->
    </header>
    <!--End Page Header-->
    <!-- Start inner Page hero-->
    <section class="d-flex align-items-center page-hero inner-page-hero " id="page-hero">
      <div class="overlay-photo-image-bg parallax"></div>
      <div class="overlay-color"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 hero-text-area">
            <h1 class="hero-title" data-splitting>Portfolio single</h1>
            <nav aria-label="breadcrumb ">
              <ul class="breadcrumb wow fadeInUp" data-wow-delay="1s">
                <li class="breadcrumb-item"><a class="breadcrumb-link" href="#0"><i class="fas fa-home icon "></i>home</a></li>
                <li class="breadcrumb-item active">Portfolio single</li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <!-- End inner Page hero-->
    <!-- Start Project Details Area-->
    <section class="project-details">
      <div class="container">
        <div class="featured-area">
          <div class="project-featured-img"><img class="featured-img " src="../assets/images/portfolio-single/feat-image.jpg"></div>
        </div>
        <div class="project-heading">
          <div class="row">
            <div class="col-12 col-lg-8 mx-auto">
              <h1 class="project-title">Designing and developing yufa website</h1>
            </div>
          </div>
        </div>
        <div class="info-area">
          <div class="row">   
            <div class="col-12 col-lg-8 mx-auto">
              <div class="project-info">
                <div class="row">
                  <div class="col-6 col-lg-3">
                    <div class="info">
                      <h5 class="title"> client</h5>
                      <p class="detail">amin themes</p>
                    </div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="info">
                      <h5 class="title">category</h5>
                      <p class="detail">web design</p>
                    </div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="info">
                      <h5 class="title">start date</h5>
                      <p class="detail">30/1/2023</p>
                    </div>
                  </div>
                  <div class="col-6 col-lg-3">
                    <div class="info">
                      <h5 class="title">share</h5>
                          <div class="sc-wraper dir-row sc-flat">
                            <ul class="sc-list">
                              <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                              <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                              <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                              <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                            </ul>
                          </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-area">
          <div class="row">
            <div class="col-12 col-lg-8 mx-auto ">
              <p class="project-text">
                drawing ipsum dolor sit, amet consectetur adipisicing elit.
                Expedita iste culpa tempore deleniti explicabo, possimus enim porro impedit
                ea dolores vitae doloribus recusandae aut quas facilis earum doloremque maiores veniam?
                
                
                
              </p>
              <h5 class="sub-heading ">project goals</h5>
              <p class="project-text">
                 Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Ullam unde, alias deserunt nemo perspiciatis cum delectus
                deleniti repudiandae aliquam exercitationem veniam ipsam 
                incidunt sequi ipsum tenetur.
                Consequuntur dolorum suscipit eos.
              </p>
              <p class="project-text">
                 Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Ullam unde, alias deserunt nemo perspiciatis cum delectus
                deleniti repudiandae aliquam exercitationem veniam ipsam 
                incidunt sequi ipsum tenetur.
                Consequuntur dolorum suscipit eos.
                deleniti repudiandae aliquam exercitationem veniam ipsam 
                incidunt sequi ipsum tenetur.
                Consequuntur dolorum suscipit eos.
                
              </p>
              <div class="project-video mega-section ">
                <div class="overlay-image-bg  "></div>
                <div class="overlay-color"></div>
                <div class="video-wraper">
                      <div class="play-btn-col-dir"><a class="video-link" href="#" role="button" data-fancybox>
                          <div class="play-video-btn">
                            <div class="play-btn"> <img class="img-fluid play-icon" src="../assets/images/icons/play-icon.svg" alt=""></div>
                            <div class="play-btn-text">watch our video</div>
                          </div></a></div>
                </div>
              </div>
              <h5 class="sub-heading ">project steps</h5>
              <p class="project-text">
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit.
                Expedita iste culpa tempore deleniti explicabo,
                possimus enim porro impedit
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit.
                Expedita iste culpa tempore deleniti explicabo,
                possimus enim porro impedit
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit.
                Expedita iste culpa tempore deleniti explicabo,
                possimus enim porro impedit
                
              </p>
              <ul class="list steps">
                <li class="list-item step"><i class="fas fa-dot-circle icon"></i><span>ipsum dolor sit amet consectetur adipisicing</span></li>
                <li class="list-item step"><i class="fas fa-dot-circle icon"></i><span>quas, ea fuga vel quis officiis laborum quaerat </span></li>
                <li class="list-item step"><i class="fas fa-dot-circle icon"></i><span>alias fugiat aliquam  soluta beatae numquam</span></li>
                <li class="list-item step"><i class="fas fa-dot-circle icon"></i><span>nobis maiores inventore harum pariatur  possimus</span></li>
                <li class="list-item step"><i class="fas fa-dot-circle icon"></i><span>nobis maiores inventore harum pariatur </span></li>
              </ul>
              <h5 class="sub-heading ">project results</h5>
              <p class="project-text">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Expedita iste culpa tempore deleniti explicabo, possimus enim porro impedit 
              </p><img class="result-img img-fluid" src="../assets/images/portfolio-single/charts.png">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  Project Details Area-->
    <!-- Start  take-action Section-->
    <section class="take-action mega-section " id="take-action">
      <div class="cta-wrapper">
        <div class="container">
          <div class="section-heading">
            <h2 class="section-title wow " data-splitting>subscribe to our newsletter</h2>
          </div>
          <div class="row  d-flex align-items-center wow fadeInUp  " data-wow-delay="0.4s">
            <div class="col-12 col-lg-8 mx-auto">
              <form class="email-capture-form">
                <input class="captured-email " id="captured-email" type="email" placeholder="Enter Your Email" required>
                <button class="  subscripe-btn " type="submit">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  take-action Section-->
    <!-- Start  page-footer Section-->
        <footer class="page-footer dark-color-footer" id="page-footer">
          <div class="container">
            <div class="row footer-cols">
              <div class="col-12 col-md-8 col-lg-4  footer-col wow fadeInUp " data-wow-delay="0.3s">
                <h6 class=" footer-col-title  ">About yufa</h6>
                <div class="footer-col-content-wrapper">        
                  <p class="footer-text-about-us ">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.Voluptatibus facere modi possimus dignissimos, 
                    aliquam nobis eaque? Voluptatem magnam quisquam rem.
                  </p>
                  <div class="social-icons">
                        <div class="sc-wraper dir-row sc-size-32">
                          <ul class="sc-list">
                            <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                            <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                            <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                            <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                          </ul>
                        </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2  footer-col wow fadeInUp " data-wow-delay="0.5s">
                <h6 class=" footer-col-title    ">useful links</h6>
                <div class="footer-col-content-wrapper">
                  <ul class="footer-menu ">
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Google</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Dribbble</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">linkedIn</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Wikipiddia</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-2 footer-col wow fadeInUp " data-wow-delay=".7s">
                <h6 class=" footer-col-title    ">Resources</h6>
                <div class="footer-col-content-wrapper">
                  <ul class="footer-menu">
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">support</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">dashboard</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">drivers</a></li>
                    <li class="footer-menu-item"><a class="footer-menu-link" href="#0">projects</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-12 col-md-8   col-lg-4 footer-col wow fadeInUp " data-wow-delay=".9s">
                <h6 class=" footer-col-title    ">contact information</h6>
                <div class="footer-col-content-wrapper">       
                  <div class="contact-info-card"><i class="fas fa-envelope icon"></i><a class="text-lowercase  info" href="mailto:example@support.com">example@support.com</a></div>
                  <div class="contact-info-card"><i class="fas fa-globe-africa icon"></i><a class="text-lowercase  info" href="#0">www.yoursite.com</a></div>
                  <div class="contact-info-card"><i class="fas fa-map-marker-alt icon"></i><span class="text-lowercase  info">5 Xyz st., Abc, alexandria, egypt.</span></div>
                  <div class="contact-info-card"><i class="fas fa-mobile-alt icon"></i><a class="info" href="tel:+20123456789">+20123456789      </a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="copyrights ">
            <div class="container">
              <div class="row">
                <div class="col-12 col-md-6">
                  <p class="creadits">&copy; 2025 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
                </div>
                <div class="col-12 col-md-6">
                  <div class="terms-links"><a href="#0">Terms of Use </a>
                    | <a href="#0">Privacy Policy</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </footer>
    <!-- End  page-footer Section-->
    <!-- Start loading-screen Component-->
    <div class="loading-screen" id="loading-screen">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <!-- End loading-screen Component-->
    <!-- Start back-to-top Component-->
    <div class="back-to-top" id="back-to-top"><i class="fas fa-arrow-up icon"></i></div>
    <!-- End back-to-top Component-->   
        
        <!--     JQuery     -->
        <script src="../js/vendors/jquery-3.4.1.min.js"></script>
        
        <!--     bootstrap     -->
        <script src="../js/vendors/bootstrap.bundle.min.js"></script>
        
        <!--     fancybox     -->
        <script src="../js/vendors/jquery.fancybox.min.js"></script>
        
        <!--     Splitting     -->
        <script src="../js/vendors/splitting.min.js"></script>
        
        <!--     wow     -->
        <script src="../js/vendors/wow.min.js"></script>
        
        <!--     main     -->
        <script src="../js/main.js"></script>
  </body>
</html>